<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>疫情地图页面</title>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
</head>
<body>

<!-- 为ECharts准备一个具备大小 (宽高) 的Dom -->
<div id="main" style="width: 600px;height:400px; left: 520px;top: 160px"></div>
<script th:inline="javascript">

    //获取model渲染过来的数据
    var mapBean1 = [[${mapBean1}]];
    var mapBean2 = [[${mapBean2}]];

    //基于准备好的dom 初始化实例
    var mychart = echarts.init(document.getElementById("main"));
    var option = {
        title:{
            text: '疫情地图',
            subtext: '仅供参考',
            x: 'center'
        },
        tooltip:{
            trigger: 'item'
        },
        legend:{
            orient: 'vertical',
            left: 'left',
            data: ['现有确诊','累计确诊']
        },
        visualMap: {
            type: 'piecewise',
            pieces: [
                {min: 10000, max: 1000000, label: '10000人及以上', color: '#de1f05'},
                {min: 1000, max: 9999, label: '1000-9999人', color: '#ff2736'},
                {min: 500, max: 999, label: '500-999人', color: '#ff6341'},
                {min: 100, max: 499, label: '100-499人', color: '#ffa577'},
                {min: 10, max: 99, label: '10-99人', color: '#ffcea0'},
                {min: 1, max: 9, label: '1-9人', color: '#ffe7b2'},
                {min: 0, max: 0, label: '0人', color: '#e2ebf4'},
            ],
            calculate: true
        },
        series: [
            {
                name: '现有确诊',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    normal: {
                        position: 'center',
                        show: true
                    }
                },
                data: JSON.parse(mapBean1)
            },
            {
                name: '累计确诊',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    normal: {
                        position: 'center',
                        show: true
                    }
                },
                data: JSON.parse(mapBean2)
            }
        ]
    };
    //将参数设置进去
    mychart.setOption(option);
</script>

</body>
</html>